<template>
    <div class="box size-box">
        <a-collapse ghost>
            <a-collapse-panel header="图片尺寸">
                <a-space wrap>
                    <div class="size-item" :class="{ active: item.value === active }" v-for="(item, index) in picSizeList" :key="index" @click="handleSizeChange(item)">
                        <div class="size-type"></div>
                        <div class="size">{{ item.size }}</div>
                        <div class="text">{{ item.text }}</div>
                    </div>
                </a-space>
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { picSize, IItem } from "../data";
const picSizeList = ref(picSize);
const active = ref("--ar 1:1");
const emits = defineEmits(["change"]);

const handleSizeChange = (item: IItem) => {
    active.value = item.value;
    emits("change", active.value);
};
</script>
<style lang="less" scoped>
.size-box {
    .size-item {
        font-size: 12px;
        text-align: center;
        width: 64px;
        transition: all 0.2s linear;
        border: 1px solid rgba(200, 200, 200, 0.3);
        box-sizing: border-box;
        cursor: pointer;
        padding: 4px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        &.active {
            border-color: #fff;
        }
    }
}
</style>
